<!--
 * @Author: your name
 * @Date: 2020-10-26 10:46:25
 * @LastEditTime: 2020-10-29 16:16:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \就业班练习d:\桌面\ma-pc\src\views\Comment\index.vue
-->
<template>
    <div class="comment">
    <el-card>
        <div slot="header" >
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        </el-breadcrumb>
        </div>
         <el-table :data="comList" style="width: 100%"  class="list-table" >
        <el-table-column prop="title" label="文章标题">
        </el-table-column>
        <el-table-column prop="total_comment_count" label="总评论数"></el-table-column>
        <el-table-column prop="fans_comment_count" label="粉丝评论数">
        </el-table-column>
        <el-table-column prop="comment_status" label="评论状态">
        <template slot-scope="scope">
        <el-tag v-if="scope.row.comment_status===true">正常</el-tag>
        <el-tag v-else-if="scope.row.comment_status===false" type="info">关闭</el-tag>
        </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
        <el-button
           type="primary"
            size="small"
           @click="putCom(scope.row.id,false)"
           v-if="scope.row.comment_status===true"
           >关闭评论</el-button>
        <el-button
           type="danger"
            size="small"
           @click="putCom(scope.row.id,true)"
           v-else-if="scope.row.comment_status===false"
           >打开评论</el-button>
      </template>
        </el-table-column>
      </el-table>
      <!-- 列表分页 -->
      <el-pagination
      style="margin-top:10px;"
      background
      layout="prev, pager, next"
      @current-change="hPageChange"
      :page-size="comList.per_page"
      :total="total_count"
      :current-page="comList.page"
     ></el-pagination>
      <!-- /列表分页 -->
    </el-card>
    </div>
</template>
<script>
import { hGetComment, putComment } from '@/api/comment'
export default {
  name: 'comment',
  data () {
    return {
      page: 1, // 第几页
      per_page: 10, // 每页显示几条
      total_count: null, // 总页数
      comList: []
      // {
      //   comment_status: 0, // 评论状态
      //   id: '', // 用户id
      //   fans_comment_count: 0, // 粉丝评论数
      //   total_comment_cound: 0, // 总评论数
      //   title: ''// 标题
      // }
    }
  },
  methods: {
    hGetCom () { // 拉取评论列表
      hGetComment(this.page).then(res => {
        this.comList = res.data.data.results
        this.total_count = res.data.data.total_count
      })
    },
    hPageChange (page) { // 翻页
      this.page = page
      this.hGetCom()
    },
    putCom (id, allow) { // 修改评论状态
      putComment(id.toString(), allow).then(res => {
        this.$message({ type: 'success', message: '修改状态成功' })
        this.hGetCom()
      })
    }
  },
  mounted () {
    this.hGetCom()
  }
}
</script>
